<template>
    <div>
        <!--搜索区域-->
        <div id="search">
            <el-form :inline="true" :model="supplierSearch" class="demo-form-inline">
                <el-form-item label="供应商名称">
                    <el-input v-model="supplierSearch.providername" placeholder="请输入供应商名称"></el-input>
                </el-form-item>
                <el-form-item label="联系人">
                    <el-input v-model="supplierSearch.connectionperson" placeholder="请输入联系人"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="supplierSearch.available" placeholder="请选择客户状态">
                        <el-option label="正常" :value="1"></el-option>
                        <el-option label="禁用" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSearchSubmit">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-refresh" @click="clearSearch">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--头部工具栏-->
        <div class="header-btn">
            <el-button type="primary" size="small" @click="showAddSupplierForm">添加</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="batchDelete">
                <el-button
                        slot="reference"
                        size="small"
                        type="danger"
                >批量删除
                </el-button>
            </el-popconfirm>
        </div>
        <!--数据展示区-->
        <el-table
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                height="500px">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="供应商名称">
                            <span>{{ props.row.providername }}</span>
                        </el-form-item>
                        <el-form-item label="邮编">
                            <span>{{ props.row.zip }}</span>
                        </el-form-item>
                        <el-form-item label="供应商地址">
                            <span>{{ props.row.address }}</span>
                        </el-form-item>
                        <el-form-item label="供应商电话">
                            <span>{{ props.row.telephone }}</span>
                        </el-form-item>
                        <el-form-item label="联系人">
                            <span>{{ props.row.connectionperson }}</span>
                        </el-form-item>
                        <el-form-item label="联系人电话">
                            <span>{{ props.row.phone }}</span>
                        </el-form-item>
                        <el-form-item label="开户银行">
                            <span>{{ props.row.bank }}</span>
                        </el-form-item>
                        <el-form-item label="银行账号">
                            <span>{{ props.row.account }}</span>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <span>{{ props.row.email }}</span>
                        </el-form-item>
                        <el-form-item label="传真">
                            <span>{{ props.row.fax }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    label="供应商名称"
                    prop="providername">
            </el-table-column>
            <el-table-column
                    label="供应商电话"
                    prop="telephone">
            </el-table-column>
            <el-table-column label="供应商状态">
                <template slot-scope="scope">
                    <el-switch
                            @change="changeSupplierAvailable(scope.row)"
                            v-model="scope.row.available"
                            :inactive-value="0"
                            :active-value="1"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.$index, scope.row)">
                        <el-button
                                slot="reference"
                                size="mini"
                                type="danger"
                        >删除
                        </el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!--分页导航区-->
        <div class="name-page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[5, 10, 15,20]"
                    :page-size="supplierSearch.limit"
                    :current-page="supplierSearch.currentPage"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <!--添加 编辑用户信息弹窗-->
        <el-dialog :title="dialogTitle" :visible.sync=" addSupplierFormVisible" width="50%" @close="clearInfo">
            <el-form :model="supplierForm" ref="supplierInfo" :rules="supplierRules" label-width="90px" size="medium">
                <el-input v-model="supplierForm.id" autocomplete="off" v-show="false"></el-input>
                <el-form-item label="供应商名称" prop="providername" v-show="dialogTitle=='添加供应商'">
                    <el-input v-model="supplierForm.providername" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮编" prop="zip">
                    <el-input v-model="supplierForm.zip" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="供应商地址" prop="address">
                    <el-input v-model="supplierForm.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="供应商电话" prop="telephone">
                    <el-input v-model="supplierForm.telephone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系人" prop="connectionperson">
                    <el-input v-model="supplierForm.connectionperson" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系人电话" prop="phone">
                    <el-input v-model="supplierForm.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="开户银行" prop="bank">
                    <el-input v-model="supplierForm.bank" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="银行账号" prop="account">
                    <el-input v-model="supplierForm.account" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="supplierForm.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="传真" prop="fax">
                    <el-input v-model="supplierForm.fax" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addSupplierInfo">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>


import {
    addOrUpdateSupplier,
    batchDeleteSupplierApi,
    getSupplierInfoByIdApi,
    getSupplierPageApi,
    updateSupplierAvailableApi
} from "@/request/api";

export default {
    name: "SupplierView",
    data() {
        return {
            supplierSearch: {
                limit: 5,
                currentPage: 1
            },
            addSupplierFormVisible: false,
            tableData: [],
            total: 300,
            dialogTitle: '添加供应商',
            supplierForm: {},
            // 复选框数据
            multipleSelection: [],
            supplierRules: {
                providername: [{required: true, message: '请输入供应商名', trigger: 'blur'}],
                zip: [{required: true, message: '请输入邮编', trigger: 'blur'}],
                address: [{required: true, message: '请选择供应商地址', trigger: 'blur'}],
                telephone: [{required: true, message: '请输入供应商电话', trigger: 'blur'}],
                connectionperson: [{required: true, message: '请输入联系人', trigger: 'blur'}],
                phone: [{required: true, message: '请输入联系人电话', trigger: 'blur'}],
                bank: [{required: true, message: '请输入开户银行', trigger: 'blur'}],
                account: [{required: true, message: '请输入银行账号', trigger: 'blur'}],
                email: [{required: true, message: '请输入邮箱', trigger: 'blur'}],
                fax: [{required: true, message: '请输入传真', trigger: 'blur'}],
            },
        }
    },
    methods: {
        // 搜索回调
        onSearchSubmit() {
            this.supplierSearch.limit = 5
            this.supplierSearch.currentPage = 1
            this.list()
        },
        // 重置搜索数据对象
        clearSearch() {
            this.supplierSearch = {
                limit: this.supplierSearch.limit,
                currentPage: this.supplierSearch.currentPage
            }
        },
        showAddSupplierForm() {
            this.addSupplierFormVisible = true
            this.dialogTitle = '添加供应商'
        },
        batchDelete() {
            // 判定用户是否选择删除的数据
            if (!this.multipleSelection.length) {
                this.$message.warning('请至少选择一项')
                return
            }
            batchDeleteSupplierApi(this.multipleSelection).then(response => {
                if (response.code == 200) {
                    this.$message({
                        type: 'success',
                        message: response.msg,
                    })
                    this.list()
                    return
                }
                this.$message.warning(response.msg)
            }).catch(error => {
                this.$message.error('请求失败')
            })
        },
        // 复选框回调函数
        handleSelectionChange(val) {
            this.multipleSelection = val.map(row => row.id)
        },
        changeSupplierAvailable(row) {
            updateSupplierAvailableApi({id: row.id, available: row.available}).then(response => {
                if (response.code == 200) {
                    this.$message({
                        type: 'success',
                        message: response.msg,
                        onClose: () => {
                            this.list()
                        }
                    })
                    return
                }
                this.$message.warning(response.msg)
            }).catch(error => {
                this.$message.error('请求失败')
            })
        },
        // 编辑用户信息回调函数
        handleEdit(index, row) {
            this.addSupplierFormVisible = true
            this.dialogTitle = '编辑供应商'
            // 获取用户的id  发送请求 获取用户详细信息
            getSupplierInfoByIdApi(row.id).then(response => {
                this.supplierForm = response.data
            })
        },
        // 删除用户信息回调函数
        handleDelete(index, row) {
            this.multipleSelection = [row.id]
            batchDeleteSupplierApi(this.multipleSelection).then(response => {
                if (response.code == 200) {
                    this.$message({
                        type: 'success',
                        message: response.msg,
                    })
                    this.list()
                    this.ids = []
                    return
                }
                this.$message.warning(response.msg)
            }).catch(error => {
                this.$message.error('请求失败')
            })
        },
        // 改变每页显示条数回调函数
        handleSizeChange(val) {
            this.supplierSearch.limit = val
            this.list()
        },
        // 改变页码回调函数
        handleCurrentChange(val) {
            this.supplierSearch.currentPage = val
            this.list()
        },
        clearInfo() {
            this.supplierForm = {}
            this.$refs.supplierInfo.clearValidate()
        },
        addSupplierInfo() {
            this.$refs.supplierInfo.validate(valid => {
                if (!valid) {
                    this.$message.error("请填写必要数据")
                    return
                }
                // 发送异步请求 添加用户信息
                console.log(this.supplierForm)
                addOrUpdateSupplier(this.supplierForm).then(response => {
                    if (response.code == 200) {
                        this.$message.success(response.msg)
                        this.addSupplierFormVisible = false
                        this.supplierForm = {}
                        // 重新加载数据
                        this.list()
                        return
                    }
                    this.$message.warning(response.msg)
                }).catch(error => {
                    this.$message.error("请求失败")
                })
            })
        },
        list() {
            // 发送异步请求 获取用户信息列表
            getSupplierPageApi(this.supplierSearch).then(response => {
                if (response.code == 200) {
                    this.tableData = response.data.currentPageData
                    this.total = response.data.total
                    return
                }
                this.$message.warning(response.msg)
            }).catch(error => {
                this.$message.error('请求失败')
            })
        },
    },
    created() {
        this.list()
    }
}
</script>

<style scoped>
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
}
</style>